<%@ page import="com.wuda.bean.User" %>
<%@ page import="java.util.Objects" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ page session="true" %>
<html>
<head>
    <meta charset="utf-8">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="./js/layui/css/layui.css">
    <script src="./js/jquery-3.4.1.js"></script>
    <script src="./js/layui/layui.all.js"></script>
    <style>

        .layui-header .layui-nav .layui-nav-item:hover .layui-nav-child {
            display: block;
        }

        .my-body {
            width: 100%;
            height: calc(100vh - 120px); /* 减去顶部和底部的高度 */
        }

        .layui-footer {
            text-align: center;
        }

        body {
            background-color: #FFF5E1; /* Light peach background */
            color: #6B4226; /* Dark brown text */
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .content {
            margin-left: 220px; /* Same width as the sidebar */
            padding: 20px;
        }

        a {
            color: #D2691E; /* Warm brown link color */
        }

        button {
            background-color: #00FFFF; /* Warm orange button background */
            color: #FFFFFF; /* White text on buttons */
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
        }

        button:hover {
            background-color: #FF7F50; /* Slightly darker orange on hover */
        }


    </style>

</head>

<body>
<%
    User user = (User) session.getAttribute("user");
%>

<div class="layui-layout layui-layout-admin">
    <!-- 顶部区域 -->
    <div class="layui-header dark">
        <div class="layui-logo">图书管理系统</div>
        <!-- 右侧用户信息和登录/退出 -->
        <ul class="layui-nav layui-layout-right">
            <% if (user != null) { %>
            <li class="layui-nav-item" id="userItem">
                <a href="javascript:;" id="username">
                    <%
                        out.write(user.getUsername());
                    %>
                </a>
                <dl class="layui-nav-child" id="userMenu">
                    <dd><a href="javascript:;" onclick="loadPage('./page/user/userDetail.jsp')">个人信息</a></dd>
                    <dd><a href="javascript:;" onclick="logout()">注销</a></dd>
                </dl>
            </li>
            <% } else { %>
            <li class="layui-nav-item" id="loginItem">
                <a href="javascript:;" onclick="loadPage('./page/public/login.jsp')">登录</a>
            </li>
            <% } %>
        </ul>
    </div>


    <!-- 左侧菜单区域 -->
    <div class="layui-side layui-bg-black  ">
        <!-- 左侧垂直导航 -->
        <div class="layui-side-scroll ">
            <ul class="layui-nav layui-nav-tree " lay-filter="test">
                <li class="layui-nav-item">
                    <a href="javascript:;" onclick="loadPage('./page/public/bookBorrowList.jsp')">图书列表</a>
                </li>
                <% if (user != null) { %>
                <li class="layui-nav-item">
                    <a href="javascript:;" onclick="loadPage('./page/user/borrowHistoryList.jsp')">借阅管理</a>
                </li>
                <% if (Objects.equals(user.getRole(), "admin")) { %>
                <li class="layui-nav-item">
                    <a href="javascript:;" onclick="loadPage('./page/admin/userAdmin.jsp')">用户管理</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" onclick="loadPage('./page/admin/bookAdmin.jsp')">图书管理</a>
                </li>
                <% } %>
                <% } %>
            </ul>
        </div>
    </div>

    <!-- 页面主体区域 -->
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe src="./page/public/bookBorrowList.jsp" frameborder="0" name="view_frame" id="view_frame"
                class="my-body"></iframe>
    </div>


    <!-- 底部区域 -->
    <div class="layui-footer">
        <!-- 底部固定区域 -->
    </div>

</div>
<script>
    /**
     * 局部页面刷新
     * @param url 页面地址
     */
    function loadPage(url) {
        $('#view_frame').attr('src', url);
    }

    /**
     * 注销登录
     */
    function logout() {
        sessionStorage.removeItem('user');
        $.ajax({
            type: "GET",
            url: "/user/exit",
            success: function (data) {
                // 注销成功，清除session和localStorage中的用户信息
                layui.layer.msg('已注销', {icon: 1});
                setTimeout(function () {
                    location.reload();
                }, 1000);
            }
        });


    }

    /**
     * 获取用户信息
     */
    function getUserInfo() {
        <%
    int userId = session.getAttribute("user")!=null? ((User) session.getAttribute("user")).getUserId() : 0;
%>
        let id = <%= userId%>;
        if (id > 0) {
            $.ajax({
                type: "GET",
                url: "/user/getUserDetail?userId=" + id,
                success: function (data) {
                    sessionStorage.setItem('user', JSON.stringify(data.data));
                }
            });
        }
    }


    $(document).ready(function () {
        getUserInfo();
    });

</script>
</body>


</html>
